<template>
     <div class="position">
        <span class="iconfont">&#xe7f1;</span>
        <span>湖北省武汉市洪山区湖北工业大学工业大学工业大学</span>
        <span class="iconfont bell">&#xe7c4;</span>
      </div>
      <div class="search">
        <span class="iconfont">&#xe7b3; |</span>
        山姆会员优惠店
      </div>
      <div class="banner">
        <!-- <img class="banner_img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt=""> -->
        <img class="banner_img" src="../../assets/banner.png" alt="">
      </div>
    <div class="icons">
    <div
      class="icons_item"
      v-for="item in iconsList"
      :key="item.desc"
    >
      <img
        class="icons_item_img"
        src="../../assets/超市.png"
      />
      <p class="icons_item_desc">{{item.desc}}</p>
    </div>
  </div>
      <div class="gap"></div>
</template>

<script>
export default {
    name:'StaticPart',
    setup() {
      const iconsList = [
      { imgName: "超市", desc: "超市便利"},
      { imgName: "菜市场", desc: "菜市场"},
      { imgName: "水果店", desc: "水果店"},
      { imgName: "鲜花", desc: "鲜花绿植"},
      { imgName: "医药健康", desc: "医药健康"},
      { imgName: "家居", desc: "家居时尚"},
      { imgName: "蛋糕", desc: "烘培蛋糕"},
      { imgName: "签到", desc: "签到"},
      { imgName: "大牌免运", desc: "大牌免运"},
      { imgName: "红包", desc: "红包套餐"},
      ]
      return { iconsList }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables';
@import '../../style/mixin';
.position{
  @include ellipsis();
  position: relative;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  .iconfont{
    top: .01rem;
    position: relative;
    font-size: .2rem;
    margin: 0 .08rem;
  }
  .bell{
    position: absolute;
    right: 0;
    top: .17rem;
    font-size: .2rem;
  }
  color: $content-fontcolor;
}
.search{
  margin-bottom: .12rem;
  line-height: .32rem;
  background-color: #f5f5f5;
  color: #b7b7b7;
  border-radius: .16rem;
  font-size:  .14rem;
  .iconfont{
    padding: .01rem .02rem 0 .1rem;
    font-size: .16rem;
  }
}
.banner{
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &_img{
    width: 100%;
  }
}

.icons{
  display: flex;
  flex-wrap: wrap;
  margin: .16rem;
  &_item{
    width: 20%;
    &_img{
      display: block;
      width: .4rem;
      height: .4rem;
      margin: 0 auto;
    }
    &_desc{
      margin:.06rem 0 .16rem 0 ;
      text-align: center;
      color: $content-fontcolor;
    }
  }
}
.gap{
  margin: 0 -.18rem;
  height: .1rem;
  background-color:$content-bgColor;
}
</style>